<template>
  <div class="Loginbox">
    <img src="../../public/img/icons/RE4wpp7.jpg" alt="">
    <!-- 登录 -->
  <ul>
    <li class="lefts">
      <h1 class="texts">🥕car<span>rot</span></h1>
    </li>
    <li class="rigth">
      <div class="box">
        <h2>欢迎登录</h2><br>
        <h3>大萝卜理赔企业后台管理系统</h3><br><br>
        <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="username" clearable></el-input><br><br>
        <el-input prefix-icon="el-icon-platform-eleme" placeholder="请输入密码" v-model="password" show-password></el-input>
        <p @click="dialogVisible = true"><i class="el-icon-question"></i>忘记密码</p><br><br><br>
        <el-button @click="login">登录</el-button>
      </div>
    </li>
  </ul>
  <!-- 验证码模块 -->
  <el-dialog title="找回密码" :visible.sync="dialogVisible" width="30%">
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="输入用户名：" prop="usenam">
      <el-input v-model.number="ruleForm.usenam"></el-input> 
    </el-form-item>
    <el-form-item label="输入手机号：" prop="phone">
      <el-input v-model.number="ruleForm.phone"></el-input> 
    </el-form-item>
  <div class="verification">
    <el-form-item label="输入验证码：" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input> 
      <el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>
    </el-form-item>
  </div>
  <el-form-item label="设置密码：" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
  </el-form-item>
  <el-form-item label="确认密码：" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
  </el-form-item>
  <div class="tijiao">
    <el-form-item>
      <el-button type="warning" @click="submitForm('ruleForm')" >提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </div>
</el-form>
</el-dialog>
  </div>
</template>

<script>
// import  {mapActions}  from  "vuex"
import moveRouter from '@/router/moveRouter'
import {Login,adminforget,getCode,menu} from '@/util/routeraxios'
export default {
    data() {
      // 忘记密码表单验证
      
      var checkAge2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var checkAge3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
        var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('验证码必须是数字值'));
          } else {
              callback();
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      username:'',
      password:'',   
      getCode:'获取验证码',   //验证码按钮相关
      isGeting:false,
      count:60,  //验证码秒数
      disable:false,
      dialogVisible: false,  //忘记密码
          ruleForm: {   //验证码相关
          pass: '',
          checkPass: '',  //确认密码
          age: '',  //验证码数据
          usenam:'',  //用户名
          phone:'', //手机号
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          phone: [
            { validator: checkAge3, trigger: 'blur' }
          ],
          usenam: [
            { validator: checkAge2, trigger: 'blur' }
          ],
        }
    };
  },
  methods:{
        getVerifyCode(){ //验证码按钮
          console.log(this.ruleForm.phone,this.ruleForm.usenam);
          getCode({phone:String(this.ruleForm.phone),username:String(this.ruleForm.usenam)}).then((response)=>{
            console.log(response.data);
            if(response.data.code == 50010){
            this.$message({
              message: '获取验证码失败！手机不能为空',
              type: 'warning'
            });
            }
            if(response.data.code == 50038){
            this.$message({
              message: '获取验证码失败！请确认有效注册过管理手机号',
              type: 'warning'
            });
            }
          }).catch((err)=>{
            console.log('getCode获取验证码出错',err);
          })
          console.log(this.ruleForm.phone);
          var countDown = setInterval(()=>{
            if(this.count < 1){
              this.isGeting = false;
              this.disable = false;
              this.getCode = '获取验证码';
              this.count = 60;
              clearInterval(countDown);
            }else{
              this.isGeting = true;
              this.disable = true;
              this.getCode = this.count-- + 's 后重新发送';
            }
          },700);//验证码执行倒计时速度
        },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) { //提交忘记密码的成功方法
            adminforget({
              code:String(this.ruleForm.age),
              password:String(this.ruleForm.checkPass),
              phone:String(this.ruleForm.phone),
              username:String(this.ruleForm.usenam)
            }).then((response)=>{
              console.log(response.data);
              if(response.data.code == 50036){
                this.$message({
                  message: '请确认该账户是否存在手机号是否一致',
                  type: 'warning'
                });
              }
              if(response.data.code == 50035){
                this.$message({
                  message: '验证码错误',
                  type: 'warning'
                });
              }
              if(response.data.code == 0){
                  this.$message({
                  message: '密码找回成功',
                  type: 'success'
                });
                this.dialogVisible = false  //显示忘记密码from表单
              }
            }).catch((err)=>{
              console.log('adminforget忘记密码出错',err);
            })
            // console.log(this.ruleForm.usenam);  //用户名
            // console.log(this.ruleForm.phone);  //手机
            // console.log(this.ruleForm.age);  //验证码
            // console.log(this.ruleForm.checkPass);  //密码
          } else {  //提交忘记密码的失败方法
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 登录
      login(){
        if(this.username.length == 0){
          this.$message({
            message: '请输入账号',
            type: 'warning'
          });
        }else if(this.password.length == 0){
          this.$message({
            message: '请输入密码',
            type: 'warning'
          });
        }else{
          // 发起请求成功后跳转路由
          console.log(this.username,this.password);
           Login({username:this.username,password:this.password}).then((response)=>{  //登录请求
            if(response.data.code == 50000){
              this.$message({
                message: '登录失败！请输入正确的账号或密码',
                type: 'warning'
              });
            }
            if(response.data.code == 50003){
              this.$message({
                message: '登录失败！请输入正确的账号或密码',
                type: 'warning'
              });
            }
            if(response.data.code == 52002){
              this.$message({
                message: '该账户不可用状态请联系超级管理员',
                type: 'warning'
              });
            }
            if(response.data.code == 0){
              this.$message({
              message: '登录成功',
              type: 'success'
            });
              console.log(response.data.data);
              this.$store.dispatch('loginuserdata',response.data,true)
              menu().then((response)=>{  //菜单请求
              console.log(response);
                if(response.data.code == 0){
                  this.$store.dispatch('logindata',response.data.data)
                  moveRouter.DynamicAddRouter()  //待动态生成路由待调用
                  this.$router.push('/home')
                }
              }).catch((err)=>{
                console.log('菜单请求出错',err);
              })
            }
          }).catch((err)=>{
            console.log('登录出错',err);
          })
          // 模拟请求
          // this.$axios({
          //   method:'post',
          //   url:'http://192.168.31.134:8809/user/login',
          //   data:{
          //     userName:this.username,userPwd:this.password
          //   }
          // }).then((response)=>{
          //   if(response.data.returnCode == 200){
          //     console.log(response.data);
          //     this.$store.dispatch('logindata',response.data,true)
          //     // moveRouter.DynamicAddRouter()
          //   }
          // })

        }
      }
      },
};
</script>
<style lang="less" scoped>
  .texts{
    font-family:STCaiyun; 
    color: white;
    margin-top: 20%;
    font-size: 90px;
    span{
      color: rgb(253,150,46)
    }
  };
  .Loginbox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    img{
      width: 100%;
      height: 100%;
    }
    ul{
      list-style: none;
      position: absolute;
      width: 800px;
      height: 350px;
      background-color: rgba(255, 0, 0, 0.171);
      overflow: hidden;
      .lefts{
        width: 50%;
        height: 100%;
        float: left;
        background-color: rgba(106, 125, 148, 0.137);
      }
      .rigth{
        width: 50%;
        height: 100%;
        float: right;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        .box{
          color: rgb(253,150,46);
          width: 300px;
          height: 300px;
          overflow: hidden;
          p{
            font-size: 10px;
            margin-top: 7px;
            float: right;
            cursor: pointer;
            font-family:PingFang SC;
          }
        }
      };
    /deep/.el-icon-platform-eleme {
      color: rgb(253,150,46);
    }
    /deep/.el-icon-user-solid{
      color: rgb(253,150,46);
    }
    /deep/.el-button{
      color: white;
      width: 100%;
      background-color: rgb(253,150,46);
    }
    }
    .verification{
      /deep/.el-input{
        width: 50%;
      }
      /deep/.el-button--primary{
        margin-left: 20px;
        width: 40%;
        background-color: rgb(253,150,46);
      }
    };
    /deep/.el-dialog__title{
      color: rgb(253,150,46);
    };
    .tijiao{
      /deep/.el-form-item__content{
      margin-left: 35% !important;
    };
    }
  }

</style>